<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   (() => {
      //     const canvas = document.createElement("canvas");
      //     canvas.width = 400;
      //     canvas.height = 400;
      //     document.body.append(canvas);

      //     const ctx = canvas.getContext("2d");

      //     ctx.beginPath();
      //     ctx.moveTo(50, 10);
      //     ctx.lineTo(50, 90);
      //     ctx.moveTo(250, 10);
      //     ctx.lineTo(250, 90);
      //     ctx.stroke();

      //     ctx.lineWidth = 10;
      //     ctx.strokeStyle = "#00f";
      //     ctx.beginPath();
      //     ctx.lineCap = "butt";
      //     ctx.moveTo(50, 30);
      //     ctx.lineTo(250, 30);
      //     ctx.stroke();

      //     ctx.beginPath();
      //     ctx.lineCap = "round";
      //     ctx.moveTo(50, 50);
      //     ctx.lineTo(250, 50);
      //     ctx.stroke();

      //     ctx.beginPath();
      //     ctx.lineCap = "square";
      //     ctx.moveTo(50, 70);
      //     ctx.lineTo(250, 70);
      //     ctx.stroke();
      //   })();
      //   (() => {
      //     const canvas = document.createElement("canvas");
      //     canvas.width = 400;
      //     canvas.height = 400;
      //     document.body.append(canvas);

      //     const ctx = canvas.getContext("2d");

      //     ctx.lineWidth = 10;
      //     ctx.lineJoin = "miter";
      //     ctx.strokeStyle = "#00f";
      //     ctx.beginPath();
      //     ctx.moveTo(50, 50);
      //     ctx.lineTo(150, 150);
      //     ctx.lineTo(250, 50);
      //     ctx.stroke();

      //     ctx.lineWidth = 10;
      //     ctx.lineJoin = "round";
      //     ctx.strokeStyle = "#00f";
      //     ctx.beginPath();
      //     ctx.moveTo(50, 100);
      //     ctx.lineTo(150, 200);
      //     ctx.lineTo(250, 100);
      //     ctx.stroke();

      //     ctx.lineWidth = 10;
      //     ctx.lineJoin = "bevel";
      //     ctx.strokeStyle = "#00f";
      //     ctx.beginPath();
      //     ctx.moveTo(50, 150);
      //     ctx.lineTo(150, 250);
      //     ctx.lineTo(250, 150);
      //     ctx.stroke();
      //   })();
      (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 400;
        document.body.append(canvas);

        const ctx = canvas.getContext("2d");

        // const miterLimit = () => {
        //   ctx.beginPath();
        //   ctx.moveTo(20, 100);
        //   ctx.lineTo(350, 100);
        //   ctx.stroke();

        //   ctx.lineWidth = 30;
        //   ctx.lineJoin = "miter";
        //   ctx.strokeStyle = "#00f";
        //   ctx.beginPath();
        //   ctx.miterLimit = 0;
        //   ctx.moveTo(50, 50);
        //   ctx.lineTo(80, 100);
        //   ctx.lineTo(110, 50);
        //   ctx.stroke();

        //   ctx.beginPath();
        //   ctx.miterLimit = 1;
        //   ctx.moveTo(150, 50);
        //   ctx.lineTo(180, 100);
        //   ctx.lineTo(210, 50);
        //   ctx.stroke();

        //   ctx.beginPath();
        //   ctx.miterLimit = 1.5;
        //   ctx.moveTo(250, 50);
        //   ctx.lineTo(280, 100);
        //   ctx.lineTo(310, 50);
        //   ctx.stroke();
        // };
        // const setLineDash = () => {
        //     ctx.lineWidth = 10;
        //     ctx.strokeStyle = '#00f'
        //     ctx.beginPath()
        //     ctx.setLineDash([20])
        //     ctx.moveTo(50, 50)
        //     ctx.lineTo(250, 50)
        //     ctx.stroke()

        //     ctx.beginPath()
        //     ctx.setLineDash([20, 10])
        //     ctx.moveTo(50, 100)
        //     ctx.lineTo(250, 100)
        //     ctx.stroke()

        //     ctx.beginPath()
        //     ctx.setLineDash([40, 20, 10])
        //     ctx.moveTo(50, 150)
        //     ctx.lineTo(250, 150)
        //     ctx.stroke()
        // }
        // setLineDash()
        const lineDashOffset = () => {
          ctx.beginPath();
          ctx.moveTo(50, 100);
          ctx.lineTo(50, 100);
          ctx.stroke();

          ctx.lineWidth = 10;
          ctx.strokeStyle = "#00f";
          ctx.beginPath();
          ctx.setLineDash([40]);
          ctx.moveTo(50, 50);
          ctx.lineTo(250, 50);
          ctx.stroke();

          ctx.beginPath();
          ctx.setLineDash([40]);
          ctx.lineDashOffset = -20;
          ctx.moveTo(50, 100);
          ctx.lineTo(250, 100);
          ctx.stroke();

          ctx.beginPath();
          ctx.setLineDash([40]);
          ctx.lineDashOffset = 20;
          ctx.moveTo(50, 150);
          ctx.lineTo(250, 150);
          ctx.stroke();
        };
        lineDashOffset();
      })();
    </script>
  </body>
</html>
